	<template>
	<view>
		<!-- 第二层筛选 -->
		<view class="screening-box">
			<!-- 单据状态筛选 -->
			<view  @click="toggleBillsStateMask('show')">{{filltersData.cat}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
			<!-- 时间筛选-->
			<!-- <view class="divider" v-if="showFiltersGoodsState">|</view> -->
			<view @click="toggleTimeStateMask('show')" >{{filltersData.store}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
			<!-- 门店筛选   检测用户是否有权 -->
			<!-- <view class="divider" v-if="isStores">|</view> -->
			<view @click="toggleStoresStateMask('show')">{{filltersData.inStock}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
			<!-- 经手人筛选  检测用户是否有权 -->
			<!-- <view class="divider" v-if="isHandlers">|</view> -->
			<view @click="toggleHandlersStateMask('show')">{{filltersData.screening}}<text class="icon-font" style="font-size: 22px; padding-left: 0px;">&#xe625;</text></view>
		</view>

		<!-- 分类 -->
		<view class="good-mask mask-top"  :class="goodCatState === 0 ? 'none' : goodCatState === 1 ? 'show' : ''">
			<view class="cat-content">
				<view class="cat-box">
					<view class="cat-fisrt">
						<view v-for="(item,index) in catFisrtList" :key="index">
							<view class="cate-item" :class="selectedCat.fId == item.id ? 'itme-selected' : ''"  @click="onClickFirst(item)">{{ item.title }}</view>
						</view>
					</view>
					<view class="cat-second">
						<view v-for="(item,index) in catSecondList" :key="index">
							<view class="cate-item" :class="selectedCat.sId == item.id ? 'itme-selected' : ''" @click="onClickSecond(item)">{{ item.title }}</view>
						</view>
					</view>
					<view class="cat-three">
						<view v-for="(item,index) in catThreeList" :key="index">
							<view class="cate-item" :class="selectedCat.tId == item.id ? 'itme-selected' : ''"  @click="onClickThree(item)">{{ item.title }}</view>
						</view>
					</view>
				</view>
				<view class="cat-btn-box">
					<view class="cat-reset"  @click="resetCat()">重置</view>
					<view class="cat-comfirt"  @click="sureCat()">选好了</view>
				</view>
			</view>
		</view>
		
		<!-- 仓库-->
		<view class="good-mask mask-top"  :class="cateTimeState === 0 ? 'none' : cateTimeState === 1 ? 'show' : ''" @click="toggleTimeStateMask">
			<view class="cate-content">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in storeList" :key="item.id">
						<view class="cate-item" :class="{ active: item.id == filltersData.TimeStateIndex }" @click="changeTimeState(item)">{{ item.title }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 产品 -->
		<view class="good-mask mask-top"  :class="cateStoresState === 0 ? 'none' : cateStoresState === 1 ? 'show' : ''" @click="toggleStoresStateMask">
			<view class="cate-content">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in goodStateList" :key="item.id">
						<view class="cate-item" :class="{ active: item.id == filltersData.StoresStateIndex }" @click="changeStoresState(item)">{{ item.name }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!--筛选 -->
		<view class="good-mask mask-top"  :class="cateHandlersState === 0 ? 'none' : cateHandlersState === 1 ? 'show' : ''" @click="toggleHandlersStateMask">
			<view class="cate-content">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in HandlersStateList" :key="item.uid">
						<view class="cate-item" :class="{ active: item.uid == filltersData.HandlersStateIndex }" @click="changeHandlersState(item)">{{ item.name }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "../../js/conf/Config.js";
	export default {
		props:["showFiltersGoodsState" , "filltersData"],
		data() {
			return {
				// 单据状态筛选
				goodCatState : 0,
				catFisrtList : [
					{
						title : "已确认",
						id : 2,
					},
					{
						title : "待付款",
						id : 3,
					},
					{
						title : "待入库",
						id : 4,
					},
					{
						title : "已入库",
						id : 5,
					},
					{
						title : "已完成",
						id : 6,
					},
				],
				
				catSecondList : [
					{
						title : "已确认",
						id : 2,
					},
					{
						title : "待付款",
						id : 3,
					},
					{
						title : "待入库",
						id : 4,
					},
					{
						title : "已入库",
						id : 5,
					},
					{
						title : "已完成",
						id : 6,
					},
				],
				
				catThreeList : [
					{
						title : "已确认",
						id : 2,
					},
					{
						title : "待付款",
						id : 3,
					},
					{
						title : "待入库",
						id : 4,
					},
					{
						title : "已入库",
						id : 5,
					},
					{
						title : "已完成",
						id : 6,
					},
				],
				
				selectedCat:{
					fId:null, //一级分类
					sId:null,//二级分类
					tId:null, //三级分类
				},
				
				//时间筛选
				cateTimeState : 0,
				storeList : [
					{
						title : "全部仓库",
						id : '',
					},
					{
						title : "初始仓库",
						id : 1,
					},
				],
							
				// 门店筛选
				cateStoresState : 0,
				goodStateList : [
					{
						name : "全部产品",
						id : '',
					},
					{
						name : "有货产品",
						id : '1',
					},
					{
						name : "无货产品",
						id : '2',
					},
					{
						name : "云店上架",
						id : '3',
					},
					{
						name : "云店下架",
						id : '4',
					},
					
					
				],
				// 经手人筛选
				cateHandlersState : 0,
				HandlersStateList : [
					{
						name : "全部经手人",
						uid : ''
					}
				],
			};
		},
		created() {
			// console.log("根据权限判断是否展示单据状态筛选",this.showFiltersGoodsState);
			this.isBillsState = this.showFiltersGoodsState;
			
			// console.log("当单据类型切换时   初始化过滤栏数据=========",this.filltersData)
			// 当单据类型切换时   初始化过滤栏数据
			// this.billsState = this.filltersData.billsState;
			// this.timeState = this.filltersData.timeState;
			this.storesState = this.filltersData.storesState;
			this.handlersState = this.filltersData.handlersState;
			this.statisticalIndex = this.filltersData.statisticalIndex;
			this.TimeStateIndex = this.filltersData.TimeStateIndex;
			this.StoresStateIndex = this.filltersData.StoresStateIndex;
			this.HandlersStateIndex = this.filltersData.HandlersStateIndex;
			
			// 初始化门店数据&经手人数据
			this.createdShopList();
			this.createdUcpList();
		},
		
		methods: {
			
			/***********************分类************BEGIN**************/
			/***重置分类***/
			resetCat()
			{
				this.selectedCat = {
					fId:null, //一级分类
					sId:null,//二级分类
					tId:null, //三级分类
				},
				this.toggleBillsStateMask();
			},
			
			/***选择好分类***/
			sureCat()
			{
				this.toggleBillsStateMask();
			},
			
			/***点击选择fisrt分类列表***/
			onClickFirst(item)
			{
				if(item == null)return;
				this.selectedCat.fId = item.id;
				this.getSecondCatData(item.id)
			},
			
			/***点击选择second分类列表***/
			onClickSecond(item)
			{
				if(item == null)return;
				this.selectedCat.sId = item.id;
			},
			
			/***点击选择three分类列表***/
			onClickThree(item)
			{
				if(item == null)return;
				this.selectedCat.tId = item.id;
			},
			
			/***获取一级分类数据**/
			getFirstCatData(id)
			{
				
			},
			
			/***获取二级分类数据**/
			getSecondCatData(id)
			{
				
			},
			
			/***获取三级分类数据***/
			getThreeCatData(id)
			{
				
			},
			/***********************分类**********END****************/
			
			
			/***  初始化门店数据  SHOP_LS ***/
			async createdShopList()
			{
				let url = config.SHOP_LS;
				let param = {};
				param.ismy = 1;
				let res = await this.$api({url:url,data:param});
				// console.log("初始化门店数据",res);
				//this.goodStateList = this.goodStateList.concat(res.data);
			},
			
			/*** 初始化经手人数据	UCP_LS  ***/
			async createdUcpList()
			{
				let url = config.UCP_LS;
				let param = {};
				param.md = 'xs';
				param.ch = 2;
				let res = await this.$api({url:url,data:param});
				if(!res)return;
				// console.log("初始化经手人数据",res.data);
				//this.HandlersStateList = this.HandlersStateList.concat(res.data);
				//console.log(this.HandlersStateList);
			},
			
			/*** 打开经手人统计方式  --  开始 ***/
			changeHandlersState(item) 
			{
				if(this.filltersData.HandlersStateIndex == item.uid) return;
				this.filltersData.HandlersStateIndex = item.uid;
				this.filltersData.handlersState = item.name;
				this.$emit("setHandlers",item.uid);
			},
			//显示分类面板
			toggleHandlersStateMask(type) 
			{	
				if(type == "show")
				{
					this.toggleTimeStateMask();
					this.toggleBillsStateMask();
					this.toggleStoresStateMask();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.cateHandlersState = 2;
				setTimeout(() => {
					this.cateHandlersState = state;
				}, timer);
			},
			/*** 打开经手人统计方式  --  结束 ***/
			
			/*** 打开时间统计方式  --  开始 ***/
			changeTimeState(item)
			{
				if(this.filltersData.TimeStateIndex == item.id) return;
				this.filltersData.TimeStateIndex = item.id;
				this.filltersData.timeState = item.title;
				this.$emit("setTime",item.id);
			},
			toggleTimeStateMask(type) 
			{	
				if(type == "show")
				{
					this.toggleBillsStateMask();
					this.toggleStoresStateMask();
					this.toggleHandlersStateMask();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.cateTimeState = 2;
				setTimeout(() => {
					this.cateTimeState = state;
				}, timer);
			},
			/*** 打开时间统计方式  --  结束 ***/
			
			
			/*** 打开门店统计方式  --  开始 ***/
			changeStoresState(item) 
			{
				if(this.filltersData.StoresStateIndex == item.id) return;
				this.filltersData.StoresStateIndex = item.id;
				this.filltersData.storesState = item.name;
				this.$emit("setStoreId",item.id);
			},
			//显示分类面板
			toggleStoresStateMask(type) 
			{	
				if(type == "show")
				{
					this.toggleTimeStateMask();
					this.toggleBillsStateMask();
					this.toggleHandlersStateMask();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.cateStoresState = 2;
				setTimeout(() => {
					this.cateStoresState = state;
				}, timer);
			},
			/*** 打开门店统计方式  --  结束 ***/
			
			/*** 打开出库统计方式   --  开始  ***/
			changeBillsState(item) 
			{
				if(this.filltersData.statisticalIndex == item.id) return;
				this.filltersData.statisticalIndex = item.id;
				this.filltersData.billsState = item.title;
				this.$emit("setST",item.id);
			},
			//显示分类面板
			toggleBillsStateMask(type) 
			{	
				if(type == "show")
				{
					this.toggleTimeStateMask();
					this.toggleStoresStateMask();
					this.toggleHandlersStateMask();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.goodCatState = 2;
				setTimeout(() => {
					this.goodCatState = state;
				}, timer);
			},
			/*** 打开出库统计方式   --  结束  ***/
		}
	}
</script>
<style lang="scss">
.screening-box
{
	display: flex;
	justify-content: space-around;
	align-items: center;
	// padding: 6px;
	border-bottom: 1px solid #ECECEC;
	background-color: #F3F3F3;
	view
	{
		cursor: pointer;
		font-size: 14px;
		max-width: 120px;
		text
		{
			padding-left: 4px;
			font-size: 8px;
			color: #333;
		}
	}
	.divider
	{
		color: #ccc;
	}
}
.cate-list
{
	view
	{
		padding-left: 10px;
		line-height: 30px;
		font-size: 15px;
	}
	view:hover
	{
		background: rgba(200,200,200,.4);
	}
}
.active
{
	color: #007AFF;
}

.mask-top
{
	top: 101px;
}

</style>